<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="json" uri="http://www.atg.com/taglibs/json" %> 



<!doctype html>
<html lang="zh-hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">


<link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.min.css">
<link href="../lib/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/main.css">    

<script type="text/javascript" src="../lib/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../lib/bootstrap/js/bootstrap.min.js"></script>

<script src="../lib/dev/js/mobiscroll.core-2.5.2.js" type="text/javascript"></script>
<script src="../lib/dev/js/mobiscroll.core-2.5.2-zh.js" type="text/javascript"></script>
<link href="../lib/dev/css/mobiscroll.core-2.5.2.css" rel="stylesheet" type="text/css" />
<link href="../lib/dev/css/mobiscroll.animation-2.5.2.css" rel="stylesheet" type="text/css" />
<script src="../lib/dev/js/mobiscroll.datetime-2.5.1.js" type="text/javascript"></script>
<script src="../lib/dev/js/mobiscroll.datetime-2.5.1-zh.js" type="text/javascript"></script>
<!-- S 可根据自己喜好引入样式风格文件 -->
<script src="../lib/dev/js/mobiscroll.android-ics-2.5.2.js" type="text/javascript"></script>
<link href="../lib/dev/css/mobiscroll.android-ics-2.5.2.css" rel="stylesheet" type="text/css" />


<title>HIFO</title>
<script type="text/javascript">
$(function () {
var currYear = (new Date()).getFullYear();	
var opt={};
opt.date = {preset : 'date'};
//opt.datetime = { preset : 'datetime', minDate: new Date(2012,3,10,9,22), maxDate: new Date(2014,7,30,15,44), stepMinute: 5  };
opt.datetime = {preset : 'datetime'};
opt.time = {preset : 'time'};
opt.default = {
theme: 'android-ics light', //皮肤样式
display: 'modal', //显示方式 
mode: 'scroller', //日期选择模式
lang:'zh',
startYear:currYear - 10, //开始年份
endYear:currYear + 10 //结束年份
};
$("#appDate").val('').scroller('destroy').scroller($.extend(opt['date'], opt['default']));
var optDateTime = $.extend(opt['datetime'], opt['default']);
var optTime = $.extend(opt['time'], opt['default']);
$("#appDateTime").mobiscroll(optDateTime).datetime(optDateTime);
$("#appTime").mobiscroll(optTime).time(optTime);
});
</script>
</head>
<body>    
   
<div class="container">

<!-- 选择时间 -->
<div class="row"><div class="col-xs-4">
<div class="input-group">
<div class="input-group-addon"><img class="home" src="images/date.png"></div>
<input type="text" class="form-control" name="appDate" id="appDate" />
</div>    
</div>
<div class="col-xs-4"><button type="button" class="btn btn-primary">查询</button></div>
<div class="col-xs-4"></div></div>




    
     
     
<div class="bs-example" data-example-id="simple-responsive-table">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>时间</th>
<th>姓名</th>
<th>部门</th>
<th>省份</th>
<th>市区</th>
<th>类型</th>
<th>地点</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr class="success" onclick="a(this)">
<th scope="row">1</th>
<td>2016-03-08 20:09</td>
<td>刘德华</td>
<td>汇发</td>
<td>四川</td>
<td>绵阳</td>
<td>打卡</td>
<td>四川省南充市顺庆区和平路街道万兴街18号</td>
<td>&bull;&radic;&Chi;?+</td>

</tr>
<tr class="success" onclick="a(this)">
<th scope="row">2</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>行动</td>
<td>Table cell</td>
<td>Table cell</td>

</tr>
<tr class="success" onclick="a(this)">
<th scope="row">3</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>

</tr>

</tbody>
</table>
</div><!-- /.table-responsive -->           
     
     
</div>		

<!-- 模态框中的表单  -->
<!-- 隐藏数据域 -->
<div class="input-group  ">
<input type="text" class="form-control" id="state" name="state" placeholder="id" value="">
<input type="text" class="form-control" id="curPage" name="curPage" placeholder="type" value="">

</div>

																															<!-- 模态框数据副本测试用 -->
<div class="row">
<div class="col-xs-6">


  <a class="btn btn-primary btn-sm" href="#" target="_blank" role="button">图片查看</a>
  
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>0 不确定
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" >1 通过
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" >21 不清晰
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" >22 不符合
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" >3 重复
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" >4 无法查看
  <div class="input-group">
    <div class="input-group-addon"><img class="home" src="images/memo.png"></div>
    <textarea class="form-control" rows="3" cols="6" name="memo"></textarea>
  </div>	
  
  <p>...</p>
  

<div class="col-xs-3 col-xs-offset-9"><button type="button" class="btn btn-primary">提交</button></div>


   	   	   	   
</div>

<div class="col-xs-6"></div>																														
																															</div>																															
																															
		

				
								
																
</div> <!-- container end -->
				
				
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">审核</h4>
      </div>
      <div class="modal-body"><!-- 模态框内容 START -->
        <a target="_blank"  href="http://we.51waji.com/picture/2016/3/1_1457046973182_DoZx.jpg" >
            <img class="home" src="images/photo.png">
        </a>
        <div class="form-group"> 
        <div class="input-group  ">
        <div class="input-group-addon"><img class="home" src="images/phone.png"></div>
        <input type="text" class="form-control" id="state" name="state" value="">


</div>


</div> <!-- form-group end -->
     
        
      </div><!-- 模态框内容 END -->
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">确定</button>
      </div>
    </div>
  </div>
</div> <!-- Modal end -->
 				
<script>
// 获取点击的行数
function a(a){
i=a.rowIndex-1;
//jcb=client_json[i].clientBase;
//jce=client_json[i].clientExtend;
alert(i);
//alert(client_json[i].clientBase);

//$('#client-base').html(jcb);
//$('#client-extend').html(jce);
//$('#myModal').modal('show');
//$('#cid').val(client_json[i].cid);
}

//移除点击的tr样式
$(function(){
$('table tr').click(function(){
$(this).removeClass();
})

});                    
               
</script>









    
    
  
        




</body>
</html>